<template>
  <!-- 定点医院查询 -->
  <div class="hospital">
    <!-- 大图说明 -->
    <div class="ball">
      <div class="title">北京市</div>
      <div class="title">医疗救治定点医院和发热门诊一览</div>
    </div>

    <!-- 检索表单 -->
    <div>
      <el-form :inline="true" size="small">
        <el-form-item>
          <el-select v-model="form.area" placeholder="请选择">
            <el-option :value="1" label="北京市"> </el-option>
            <el-option :value="2" label="江西省"> </el-option>
            <el-option :value="3" label="浙江省"> </el-option>
            <el-option :value="4" label="安徽省"> </el-option>
            <el-option :value="5" label="福建省"> </el-option>
            <el-option :value="6" label="湖南省"> </el-option>
            <el-option :value="7" label="湖北省"> </el-option>
            <el-option :value="8" label="山东省"> </el-option>
            <el-option :value="9" label="广东省"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
           <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="form.keywords"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- /检索表单 -->

    <!-- 医院列表 -->
    <div class="list">
      <!-- 医院信息 -->
        <div class="item" v-for="item in 6" :key="item" @click="toMap(item)">
        <div class="info">
          <div class="name"> <span class="index">{{item}}</span > 
          <span v-if="item===1" >北京市垂杨柳医院</span>
          <span v-if="item===2" >北京市朝阳区双桥医院</span>
          <span v-if="item===3" >北京市第一中西医结合医院</span>
          <span v-if="item===4" >中国中医科学院望京医院</span>
          <span v-if="item===5" >首都医科大学附属北京地坛医院</span>
          <span v-if="item===6" >航空总医院</span>
          </div>
          <div class="tags">
            <span class="tag danger" v-if="item===5">医疗救治定点医院</span>
            <span class="tag warning" >发热门诊</span>
          </div>
          <div class="address">
            <span v-if="item===1">北京市朝阳区垂杨柳南街2号</span>
            <span v-if="item===2">北京市朝阳区双桥东路与双桥中路交叉口西北</span>
            <span v-if="item===3">北京市朝阳区金台路13号</span>
            <span v-if="item===4">北京市朝阳区花家地街6号</span>
            <span v-if="item===5">北京市朝阳区京顺东街8号</span>
            <span v-if="item===6">北京市朝阳区北苑路3号院</span>
            </div>
        </div>
        <div class="location">
          <div>
          <!--图标-->
          <i class="iconfont icon-dingwei"></i></div>
          <div class="juli">
            <span v-if="item===1">1645.31km</span>
            <span v-if="item===2">1646.74km</span>
            <span v-if="item===3">1648.61km</span>
            <span v-if="item===4">1655.93km</span>
            <span v-if="item===5">1660.74km</span>
            <span v-if="item===6">1660.79km</span>
            </div>
        </div>
      </div>
    </div>
    <!-- /医院列表 -->
  </div>
</template>

<script>

export default {
  data(){
    return {
      form:{
        area:1,
        keywords:""
      }
    }
      },
  methods:{
    // 跳转到地图中
    
    toMap(item){
      if(item==1){
      this.$router.push({
        path:"/hospital/map",
        query:{id:item}
      }
      )
    }
    else if(item==2){
      this.$router.push({
        path:"/hospital/map2",
        query:{id:item}
      }
      )
    }
    else if(item==3){
      this.$router.push({
        path:"/hospital/map3",
        query:{id:item}
      }
      )
    }
    else if(item==4){
      this.$router.push({
        path:"/hospital/map4",
        query:{id:item}
      }
      )
    }
    else if(item==5){
      this.$router.push({
        path:"/hospital/map5",
        query:{id:item}
      }
      )
    }
    else if(item==6){
      this.$router.push({
        path:"/hospital/map6",
        query:{id:item}
      }
      )
    }
    }
  }
}
</script>
<style scoped>
.ball {
  height: 150px;
  background-image: url("../../assets/bg3.png");
  background-size: cover;
  margin: -.5em;
  margin-bottom: 1em;
  padding: 1em;
  color: #ffffff;
}
.ball > .title {
  line-height: 2em;
  font-size: 20px;
  font-weight: bold;
}
.tag {
  border-radius: 3px;
  color: #ffffff;
  padding: .2em .5em;
  font-size: 14px;
}
.tag.warning {
  background-color: #ffb34e;
}
.tag.danger {
  background-color: #ff9896;
}
.list {
  margin-top: .5em;
}
.list > .item {
  border-bottom: 1px solid #f8f8f8;
  padding: .5em 0;
  margin-bottom: .5em;
  display: flex;
}
.list > .item > .info {
  flex:1;
}
.list > .item > .info .name {
  font-size: 16px;
  line-height: 3em;
}
.list > .item > .info .index {
  width: 1.2em;
  background-color: #f4f4f4;
  color: #333333;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 1.2em;
}
.list > .item > .info .tags {
  margin:.2em 0;
}
.list > .item > .info .address {
  color: #999999;
  font-size: 14px;
  line-height: 2em;
}
.list > .item > .location {
  flex-basis: 50px;
  text-align: right;
  text-align: center;
}
.list > .item > .location  .iconfont{
  font-size: 24px;
  line-height: 2em;
  color:#0074ff;
}
.list > .item > .location .juli {
  color: #999999;
  line-height: 2em;
}
</style>